import './MenuItem.scss'
import React from 'react'
import {connect} from 'react-redux'
import {addSelectItem,minuSelectItem}from '../../actions/menuAction.js'
class MenuItem extends React.Component {
  addItem() {
    this.props.dispatch(addSelectItem({
      index: this.props.index
    }))
  }
  minuItem(){
    this.props.dispatch(minuSelectItem({
      index: this.props.index
    }))
  }
  render() {
    let item = this.props.data
    return (
      <div className='menu-item'>
        <img className='img' src={item.picture}/>
        <div className='menu-item-right'>
          <p className='item-title'>{item.name}</p>
          <p className='item-desc two-line'>{item.description}</p>
          <p className='item-zan'>{item.praise_content}</p>
          <p className='item-price'>
            ￥{item.min_price}/<span className='unit'>{item.unit}</span>
          </p>
        </div>
        <div className='select-content'>
          {item.chooseCount > 0 ? <div onClick={()=>this.minuItem()} className='minus'></div>:null}
          {item.chooseCount > 0 ? <div className='count'>{item.chooseCount}</div>: null}
          <div className='plus' onClick={() => this.addItem()}></div>
        </div>
      </div>
    )
  }
}
export default connect()(MenuItem)